import React, { Component } from 'react'

export default class ClassState extends Component {
    state = {
        count: 99,
        msg: '尚硅谷'
    }

    constructor() {
        super();
        this.click3 = this.click3.bind(this);
    }
    click1() {
        // this.setState 运行后会产生两个严重后果
        // 1. 状态数据被改变了
        // 2. render函数重新调用

        // 报错：原因是事件的回调函数是 window调用的，所以this本身在严格模式下是指向undefined
        this.setState({
            count: this.state.count + 1
        })
    }
    click2(a,b,c) {
        // 因为使用bind，使得this用的是render中的this，render中this永远指向当前实例
        this.setState({
            count: this.state.count + 1
        })
    }
    click3() {
        this.setState({
            count: this.state.count + 1
        })
    }
    click4(a,b,c) {
        // onClick={()=>this.click4()}
        // 箭头函数没有自己的this，使用的是render中的this，所以click4中的this指向当前实例
        this.setState({
            count: this.state.count + 1
        })
    }

    click5 = () => {
        // 相当于是在构造函数construtor中执行的，所以使用的是constructor中的this
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        console.log('render run');
        let { count, msg } = this.state;
        return (
            <div>
                <p>count : {count}</p>
                <p>msg : {msg}</p>
                <p><button onClick={this.click1}>count+ 有问题的</button></p>
                <p><button onClick={this.click2.bind(this,1,2,3)}>count + bind </button></p>
                <p><button onClick={this.click3}>count + bind + constructor</button></p>
                <p><button onClick={() => this.click4(11,22,33)}>包裹箭头函数</button></p>
                <p><button onClick={this.click5}>直接定义成箭头函数</button></p>
            </div>
        )
    }
}
